// 页面 Router：
window.location.href = "http://www.baidu.com"
history.back();

//Hash 路由：
window.onhashchange = function () {
    console.log(window.location.hash);
}

// H5 Router：
history.pushState('test', 'Title', '#test') //推进一个状态
history.pushState('test', 'Title', '/user/index')//推入一个新的地址
history.replaceState('test', null, '/index/test')//替换一个状态

window.onpopstate = function(e) {
    //以 https://www.w3cschool.cn/tutorial#test 为例
    this.console.log(window.location.href);//取全路径https://www.w3cschool.cn/tutorial#test
    this.console.log(window.location.pathname);//取 /tutorial
    this.console.log(window.location.href); //取hash值 #test
    this.console.log(window.location.search); //取hash值 #test
    this.console.log(window.location.host);     // 取主机名       www.w3cschool.cn
    this.console.log(window.location.hostname); // 取主机名+端口号 www.w3cschool.cn
    this.console.log(window.location.protocol); // https:
    console.log("h5 router change:",e.state); // 取？号后面的字段，通常是查询字段
}
//h5路由只处理后退按钮（浏览器的后退按钮），不处理前进

// React Router
// React 官方提供的路由插件，单面应用必备
// 使用版本，react-router-dom
//安装React Router的时候，安装一个react-router-dom就可以了，而不是像react一样，要装（react和react-dom）两个
// 动态路由，纯react组件
{/* 
<BrowserRouter/>//h5路由方法实现，它需要在后端
<HashRouter/>//hash方法实现
<Route/>//路由规则，解决路由匹配的问题，哪个路径对应哪个组件，就是它在解决
<Switch/>//路由选项，解决了路由多次匹配的问题，假如有多个Route都符合路由规则，只有Switch组件里面的第一个Route规则能被选中 
<Link/><NavLink/>//跳转导航,被解析为<a>标签，NavLink是在Link的基础上做了一些选中状态的处理，适合做导航菜单
<Redirect/>//自动跳转,它的作用是在匹配到某一些路径的时候，可以让页面实现自动跳转
*/}


